<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input v-model="allSel" type="checkbox" /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <buyTr is="buyTr" 

        v-for="(item,index) in goodList"
        :key="index"

        :name="item.name"
        :price="item.price"
        :num="item.num"
        :checked="item.checked"
        :index="index"

        @add="addnum"
        @minus="minusnum"
        
        @updateCheck="ischeck"
        ></buyTr>

      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
              {{ total }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
 import buyTr from './components/buyTr.vue'
export default {
    name:'App',
  data() {
    return {
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      total:0
    };
  },
  methods:{
      addnum(index){
         this.goodList[index].num++
      },
      minusnum(index){
          if(this.goodList[index].num<=0) return;
          this.goodList[index].num--
      },
      ischeck(check,index){
        this.goodList[index].checked=check
      }
  },
    computed:{
  allSel:{
      set(checked){
          this.goodList.forEach(item=>item.checked=checked)
      },
      get(){
         return  this.goodList.every(item=>item.checked===true)   
      } 
        }
    },
    watch:{
        goodList:{
            deep:true,
            handler(goodList){
                 this.total=0;
                goodList.forEach(item=>{
                    if(item.checked===true){
                        this.total+=item.num*item.price
                    }
                })
            }
        }
    },
 components:{
        buyTr
    },
};
</script>

<style>
</style>